/**
 * 可编辑双表头页面展示
 * @author SPY
 * @date 2020/02/02
 */

import React from 'react';
import { Card, Switch, Icon, Button } from 'antd';
import EditTable from './components/EditTable/EditTable';

const leftTitle = ['2018年', '2019年', '2020年'];

class EditTablePage extends React.Component {

  state = {
    isEdit: true,
    data: [
      {
        key: '1',
        name: '李刚',
        oneCount: 20,
        twoCount: 34,
        threeCount: 22,
      },
      {
        key: '2',
        name: '王廉明',
        oneCount: 17,
        twoCount: 44,
        threeCount: 12,
      },
      {
        key: '3',
        name: '李瑞',
        oneCount: 25,
        twoCount: 35,
        threeCount: 9,
      },
    ],
  }

  onChange = (data) => {
    this.setState({ data });
  }

  handleSwitch = (checked) => {
    this.setState({ isEdit: checked });
  }

  handleReadData = () => {
    const { data } = this.state;
    data.forEach((item,index)=>{
      if(item.leftTitle) delete item.leftTitle;
    });
    window.alert(JSON.stringify(data));
  }

  render() {
    const { data, isEdit } = this.state;

    data.forEach((item, index) => {
      if (!item.leftTitle) {
        item.leftTitle = leftTitle[index];
      }
    });

    return (
      <Card>
        <span style={{ fontSize: 18, lineHeight: 4, verticalAlign: 'center' }}>
          是否可编辑：
        <Switch
            checkedChildren={<Icon type="check" />}
            unCheckedChildren={<Icon type="close" />}
            defaultChecked
            onChange={this.handleSwitch}
          />
        </span>
        <EditTable data={data} onChange={this.onChange} isEdit={isEdit} />
        <Button type='primary' style={{ marginTop: 20 }} onClick={this.handleReadData}>查看表格数据</Button>
      </Card>
    )
  }
}

export default EditTablePage;